<!--表格内台弹出框自定义组件-->
<template>
  <el-form-item :label="item.label" :prop="item.prop">
    <el-input v-bind="$attrs" v-on="$listeners" v-if="item.type === 'input'" :placeholder="item.placeholder" :disabled="item.disabled === undefined ? (disabledAll === false ? false : disabledAll) : item.disabled" :readonly='item.readonly'></el-input>
    <el-input v-bind="$attrs" v-on="$listeners" v-else-if="item.type === 'textarea'" type="textarea"  :resize="item.resize === undefined ? 'none' : item.resize" :placeholder="item.placeholder" :rows="item.rows === undefined ? 2 : item.rows" :maxlength="item.maxlength === undefined ? 500 : item.maxlength" :disabled="item.disabled === undefined ? (disabledAll === false ? false : disabledAll) : item.disabled"></el-input>
    <el-checkbox v-bind="$attrs" v-on="$listeners" v-if="item.type === 'checkbox' && !item.data" :disabled="item.disabled === undefined ? (disabledAll === false ? false : disabledAll) : item.disabled"></el-checkbox>
    <el-checkbox-group v-bind="$attrs" v-on="$listeners" v-if="item.type === 'checkbox'">
      <el-checkbox :label="i[item.dataLabel]" v-for="i in item.data" :key="i[item.dataLabel]" v-show="item.dataLabel !== undefined" :disabled="item.disabled === undefined ? (disabledAll === false ? false : disabledAll) : item.disabled">{{i[item.dataName]}}</el-checkbox>
      <el-checkbox v-show="item.dataLabel === undefined" :label="i" v-for="i in item.data" :key="i[item.dataLabel]" :disabled="item.disabled === undefined ? (disabledAll === false ? false : disabledAll) : item.disabled">{{i[item.dataName]}}</el-checkbox>
    </el-checkbox-group>
    <el-radio-group v-bind="$attrs" v-on="$listeners" v-else-if="item.type === 'radio'">
      <el-radio :label="i[item.key === undefined ? 'id' : item.key]" v-for="(i,dataIndex) in item.data" :key="dataIndex" :disabled="item.disabled === undefined ? (disabledAll === false ? false : disabledAll) : item.disabled">{{i[item.dataLabel]}}</el-radio>
    </el-radio-group>
    <el-select v-bind="$attrs" v-on="$listeners" :placeholder="item.placeholder" :multiple="item.multiple?item.multiple: false" :filterable="item.filterable" v-else-if="item.type === 'select1' && item.dataLabel !== undefined" :disabled="item.disabled === undefined ? (disabledAll === false ? false : disabledAll) : item.disabled" style="width: 100%" :clearable="item.clearable">
      <el-option :label="i[item.dataName]" :value="i[item.dataLabel]" v-for="i in item.data" :key="i[item.dataName]"  :disabled="i.disabled"></el-option>{{item.multiple}}
    </el-select>
    <el-select v-bind="$attrs" v-on="$listeners" :placeholder="item.placeholder" :multiple="item.multiple?item.multiple: false" :filterable="item.filterable" v-else-if="item.type === 'select' && item.dataLabel !== undefined" :disabled="item.disabled === undefined ? (disabledAll === false ? false : disabledAll) : item.disabled" style="width: 100%" :clearable="item.clearable">
      <el-option :label="i[item.dataName]" :value="i[item.dataLabel]" v-for="i in item.data" :key="i[item.dataLabel]" :disabled="item.disabled === undefined ? (disabledAll === false ? false : disabledAll) : item.disabled"></el-option>
    </el-select>
    <el-select v-bind="$attrs" v-on="$listeners" :placeholder="item.placeholder" :multiple="item.multiple?item.multiple: false" :filterable="item.filterable" v-else-if="item.type === 'select' && item.dataLabel === undefined" :value-key="item.dataKey" :disabled="item.disabled === undefined ? (disabledAll === false ? false : disabledAll) : item.disabled" style="width: 100%">
      <el-option :label="i[item.dataName]" :value="i" v-for="i in item.data" :key="i[item.dataKey]" :clearable="true" :disabled="item.disabled === undefined ? (disabledAll === false ? false : disabledAll) : item.disabled"></el-option>
    </el-select>
    <el-date-picker v-else-if="item.type === 'dateTime2'" v-bind="$attrs" v-on="$listeners" :editable="false" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" align="right" type="datetime" :placeholder="item.placeholder" :disabled="item.disabled === undefined ? (disabledAll === false ? false : disabledAll) : item.disabled" popper-class="pop-datatime" style="width: 100%">
    </el-date-picker>
    <el-date-picker v-else-if="item.type === 'dateTime'" v-bind="$attrs" v-on="$listeners" :editable="false" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" align="right"
                    :placeholder="item.placeholder" :disabled="item.disabled === undefined ? (disabledAll === false ? false : disabledAll) : item.disabled" style="width: 100%">
    </el-date-picker>
    <el-date-picker v-else-if="item.type === 'date'" v-bind="$attrs" v-on="$listeners" :editable="false"  format="yyyy-MM-dd" value-format="yyyy-MM-dd" align="right" type="date"
      :placeholder="item.placeholder" :disabled="item.disabled === undefined ? (disabledAll === false ? false : disabledAll) : item.disabled" style="width: 100%">
    </el-date-picker>
    <el-date-picker v-else-if="item.type === 'date2'" v-bind="$attrs" v-on="$listeners" :editable="false"  format="yyyy-MM-dd" value-format="yyyy-MM-dd" align="right" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" :disabled="item.disabled === undefined ? (disabledAll === false ? false : disabledAll) : item.disabled" style="width: 100%">
    </el-date-picker>
    <!-- 年 -->
    <el-date-picker
      style="width: 100%"
      v-else-if="item.type === 'dateYear'"
      v-bind="$attrs" v-on="$listeners"
      type="year"
      align="right"
      :editable="false"
      format="yyyy"
      value-format="yyyy"
      :disabled="item.disabled === undefined ? (disabledAll === false ? false : disabledAll) : item.disabled"
      placeholder="选择年份">
    </el-date-picker>
    <!-- 月 -->
    <el-date-picker
      style="width: 100%"
      v-else-if="item.type === 'dateMonth'"
      v-bind="$attrs" v-on="$listeners"
      type="month"
      align="right"
      :editable="false"
      format="MM"
      value-format="MM"
      :disabled="item.disabled === undefined ? (disabledAll === false ? false : disabledAll) : item.disabled"
      placeholder="选择月份">
    </el-date-picker>

    <el-input-number v-else-if="item.type === 'double'" v-bind="$attrs" v-on="$listeners" :precision="item.step === undefined ? 2 : item.step" :controls="item.controls === undefined ? false : item.controls" :step="item.step === undefined ? 1 : item.step" :max="item.max === undefined ? 1000000 : item.max" :min="item.min === undefined ? 0 : item.min" :disabled="item.disabled === undefined ? (disabledAll === false ? false : disabledAll) : item.disabled" style="width: 100%"></el-input-number>
    <el-input-number v-else-if="item.type === 'number'" v-bind="$attrs" v-on="$listeners" :precision="item.step === undefined ? 0 : item.step" :controls="item.controls === undefined ? false : item.controls" :step="item.step === undefined ? 1 : item.step" :max="item.max === undefined ? 1000000 : item.max" :min="item.min === undefined ? 0 : item.min" :disabled="item.disabled === undefined ? (disabledAll === false ? false : disabledAll) : item.disabled" style="width: 100%"></el-input-number>
    <el-cascader v-else-if="item.type === 'cascader'" :show-all-levels="item.showAllLevels ? item.showAllLevels: false" style="width: 100%"  :placeholder="item.placeholder" filterable :options="item.data" :change-on-select="true" :props="item.props === undefined ? {label: 'name',value: 'code',children: 'children'} : item.props" v-bind="$attrs" v-on="$listeners"></el-cascader>
  </el-form-item>
</template>
<script>
export default {
  name: 'popForm',
  props: {
    item: {
      type: Object,
      required: true
    },
    disabledAll: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    // currentValue: {
    //   // 动态计算currentValue的值
    //   get: function () {
    //     return this.value // 将props中的value赋值给currentValue
    //   },
    //   set: function (val) {
    //     this.$emit('input', val) // 通过$emit触发父组件
    //   }
    // }
  },
  data () {
    return {
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      },
      pickerOptions1: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [{
          text: '今天',
          onClick (picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '昨天',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周前',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      },
      daterangeOpt: {
        shortcuts: [{
          text: '今天',
          onClick (picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '昨天',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周前',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      }
    }
  }
}
</script>
<style lang="scss">
  // .pop-datatime{
  //   .el-picker-panel__footer{
  //     button:first-child{
  //       display: none
  //     }
  //   }
  // }
</style>
